<template>
  <div>
    <form>
      <div class="input-control input-user">
        <input type="text" placeholder="请输入用户名" v-model="username">
      </div>
      <div class="input-control input-pass">
        <input type="password" placeholder="请输入密码" v-model="password">
      </div>
      <div class="input-control login-fun">
        <span style="float: left; color: #77839c;" @click="loginByPhone">手机验证码</span>
        <span style="float: right; color: #1a1a1a;">忘记密码</span>
      </div>
      <div class="input-control input-loginBtn">
        <el-button type="primary" @click="doLogin">登录</el-button>
      </div>
      <div class="input-control login-type">
       <span @click="loginByQrCode">二维码登录</span><em> · </em>
       <span @click="loginByglobalPhone">海外手机登录</span><em> · </em>
       <span @click="loginBySocialUser">社交账号登陆</span>
      </div>
    </form>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  name: "login",
  data () {
    return {
      username: '',
      password: '',
      userTokens: ''
    }
  },
  computed: {
    ...mapGetters(['userToken'])
  },
  methods: {
    loginBySocialUser () {
      this.$router.push({name: 'sociallogin'})
    },
    loginByglobalPhone () {
      this.$router.push({name: 'phonelogin'})
    },
    loginByQrCode () {
      this.$router.push({name: 'qrcodelogin'})
    },
    loginByPhone () {
      console.log(1)
      this.$router.push({name: 'phonelogin'})
    },
    doLogin () { // 用户名登录
      this._login({username: this.username, password: this.password})
        .then((res) => {
          console.log(res)
          this.userTokens = res.data.result.token
          this.doGetUserInfo()
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    doGetUserInfo () {
      this._getUserInfo({token: this.userToken})
        .then((res) => {
          this.$router.push({name: '/'})
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    ...mapActions(['_login', '_getUserInfo'])
  }
}
</script>

<style scoped lang="less">
  .login-type{
    text-align: center;
    font-size: 14px;
    color: #808080;
    span{
      cursor: pointer;
    }
  }
  .login-fun{
    span{
      cursor: pointer;
    }
  }
</style>
